<template>
  <div id="Menu"> 
  <Tree @on-click="getItem" :data="TreeData" />

    <div>{{title}}</div>
    <div>{{data}}</div>
    <Card /> 
<div>
 <button @click="clickTap">派发</button> 
</div>
<div>
  <button @click="clickTap2">派发2</button>
</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref ,onMounted} from 'vue'
import Tree from '../Tree/index.vue'
import { TreeList } from '../../utils/js/type'
const getItem = (e: TreeList)=>{
console.log(e)
}
onMounted(() => {
  console.log(45)
})
const TreeData = reactive<TreeList[]>([
  {
    name:'1',
    children:[
     {
        name: '1-1',
        children:[
          {
            name:'1-1-1',
            children:[
              {
                name: '1-1-1-1'
              },
              {
                name: '1-1-1-2'
              },
              {
                name: '1-1-1-3'
              },
              {
                name: '1-1-1-4'
              }
            ]
          }
        ]
     }
    ]
  },
  {
    name: '2',
    children: [
      {
        name: '2-1',
        children: [
          {
            name: '2-1-1'

          }
        ]
      },
       {
        name: '2-2',
        children: [
          {
            name: '2-2-1',
            children:[{
              name:'2-2-1-1'
            }]
          }
        ]
      }
    ]
  }
])

type Props = {
  title:string
  data:number[]
}
const flag = ref(false)
const list = reactive<number[]>([1,2,3])
//defineProps<Props>() 无法与withDefaults共存 全都写就会报错
const emit = defineEmits(['on-click','on-click2'])
const clickTap = ()=>{
  emit('on-click', list,true)
}
const clickTap2 = () => {
  emit('on-click', list, false)
}
defineExpose({
  list,
  flag
})
withDefaults(defineProps<Props>(),{
  title:'默认值',
  data:() => [1,2,3]
})
</script>
<style scoped lang='less'>
#Menu{
width: 300px;
border-right:1px solid #000000 ;
height: 100%;
}

</style>